<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" media="screen"/>
    <script th:src="@{/plugins/area/CityJson.js}"></script>
    <script th:src="@{/plugins/area/ProJson.js}"></script>
    <script th:src="@{/plugins/area/DistrictJson.js}"></script>
    <title>客户管理</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('客户管理','客户管理')"></div>
</div>

<div th:fragment="content" th:remove="tag">


    <div class="row">
        <div class="col-xs-12">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">查询条件</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" id="queryForm" th:action="@{/ka/list}" method="post" >
                    <div class="box-body">
                        <shiro:hasRole name="sys_nationwide">
                            <div class="row">
                                <div class="col-sm-4">
                                    <select id="selProvince2"  style="width: 140px;height: 34px;float:left" name="provinceId" class="form-control select2" >
                                        <option value="">--省份--</option>
                                    </select>
                                    <select id="selCity2"  style="width: 140px;height: 34px;float:left" name="cityId" class="form-control select2" >
                                        <option value="">--城市--</option>
                                    </select>
                                </div>
                                <div class="col-xs-3" >
                                    <input type="text" th:name="kaAgencyName" class="form-control input-sm" placeholder="KA代理商名称"/>
                                </div>
                                <div class="col-xs-3">
                                    <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                        <input th:name="createTimeStr" class="form-control input-sm" type="text" value="" readonly="readonly" placeholder="创建时间"/>
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                </div>
                            </div>
                            <br/>
                            <input type="hidden" th:name="nationwideId" th:value="${session.authUser.userId}"/>
                        </shiro:hasRole>
                        <div class="row">
                            <div class="col-xs-3">
                                <input type="text" th:name="kaName"  class="form-control input-sm" placeholder="客户名称"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="contactName" class="form-control input-sm" placeholder="联系人"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="contactPhone" class="form-control input-sm" placeholder="联系电话"/>
                            </div>

                            <shiro:hasRole name="sys_bd">
                                <input type="hidden" th:name="cityAgencyId" th:value="${session.authUser.userId}"/>
                            </shiro:hasRole>
                            <shiro:hasRole name="sys_agency">
                                <input type="hidden" th:name="agencyId" th:value="${session.authUser.userId}"/>
                            </shiro:hasRole>
                            <shiro:hasRole name="sys_kaAgency">
                                <input type="hidden" th:name="kaAgencyId" th:value="${session.authUser.userId}"/>
                            </shiro:hasRole>
                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                    </div>
                </form>
            </div>


            <div class="box">

                <!-- /.box-header -->
                <div class="box-body">
                    <div class="table-responsive">
                    <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed">

                        <thead >
                        <tr>
                            <th>省份</th>
                            <th>地市</th>
                            <th>城市经理</th>
                            <th>客户名</th>
                            <shiro:hasAnyRoles name="sys_agency,sys_nationwide">
                                <th>子门店数量</th>
                            </shiro:hasAnyRoles>
                            <th>老板</th>
                            <th>电话</th>
                            <th>状态</th>
                            <th>佣金比例(%)</th>
                            <th>创建时间</th>
                            <shiro:hasAnyRoles name="sys_agency,sys_nationwide">
                             <th>操作</th>
                            </shiro:hasAnyRoles>
                        </tr>
                        </thead>
                    </table>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <form id="getlistForm">
        <shiro:hasRole name="sys_agency">
            <input type="hidden" th:name="agencyId" th:value="${session.authUser.userId}"/>
        </shiro:hasRole>
        <shiro:hasRole name="sys_nationwide">
            <input type="hidden" th:name="nationwideId" th:value="${session.authUser.userId}"/>
        </shiro:hasRole>
    </form>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header" style="background-color: #307095;">
                    <button type="button" class="close" data-dismiss="modal" id="btn_close" >
                        <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel2">客户-编辑</h4>
                </div>

                <div class="modal-body">
                    <form class="form-horizontal"  id="editForm"  method="post">
                        <input type="hidden" class="form-control" name="kaId" />
                        <input type="hidden" class="form-control" name="qhsAccountInfo.accountId"  id="accountId"/>
                        <input type="hidden" class="form-control" id="cityAgencyName" name="cityAgencyName"  />
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">客户类型</label>
                            <div class="col-sm-9">
                                <select class="form-control select2" name="kaType"  data-rule-required="true" data-msg-required="请选择客户类型">
                                    <option value="" >请选择</option>
                                    <option value="1">大型连锁(30家以上门店)</option>
                                    <option value="2">中型连锁(5-30家门店)</option>
                                    <option value="3">小型连锁(2-5家门店)</option>
                                    <option value="4">单门店</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">客户名称</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="kaName" placeholder="营业执照全称/须和印章字样相符"
                                       data-rule-required="true" data-msg-required="请录入客户名称"
                                       data-rule-minlength="2" data-msg-minlength="客户名称最少2个字符"
                                       data-rule-maxlength="20" data-msg-maxlength="客户名称最大为20个字符"
                                />
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">登陆账户名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="loginName" name="loginName"
                                       data-rule-required="true" data-msg-required="请录入管理账户名"
                                       data-rule-minlength="2" data-msg-minlength="管理账户名最少2个字符"
                                       data-rule-maxlength="20" data-msg-maxlength="管理账户名最大为20个字符"
                                       data-rule-commonString ="true" data_msg-commonString="账户名格式为字母或字母加数字"
                                       placeholder="登陆后台管理的账户名，请牢记！"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">负责人</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="contactName" placeholder="负责人"
                                       data-rule-required="true" data-msg-required="请录入负责人"
                                       data-rule-minlength="2" data-msg-minlength="负责人最少2个字符"
                                       data-rule-maxlength="20" data-msg-maxlength="负责人最大为20个字符"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">负责人电话</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="contactPhone"  placeholder="负责人电话"
                                       data-rule-required="true" data-msg-required="请录入负责人电话"
                                       data-rule-iphone="true"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">KA代理</label>
                            <div class="col-sm-9">
                                <select class="form-control select2" name="kaAgencyId" id="kaAgencyId" >
                                    <option value="">请选择</option>
                                </select>
                                <input type="hidden" name="kaAgencyName" id="kaAgencyName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">所属城市代理</label>
                            <div class="col-sm-9">
                                <select class="form-control select2" name="cityAgencyId" id="cityAgencyId" data-rule-required="true" data-msg-required="请选择所属城市代理">
                                </select>
                                <input type="hidden" name="cityContactName" id="cityContactName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">地区</label>
                            <div class="col-sm-9">
                                <select id="selProvince" name="provinceId" style="width: 120px;height: 34px;float:left" class="form-control select2" >
                                    <option value="0">--省份--</option>
                                </select>
                                <select id="selCity" name="cityId" style="width: 120px;height: 34px;float:left" data-rule-required="true" data-msg-required="请选择地区" class="form-control select2" >
                                    <option value="0">--城市--</option>
                                </select>
                                <select id="selDistrict" name="areaId" style="width: 120px;height: 34px;float:left" data-rule-required="true" data-msg-required="请选择区县" class="form-control select2" >
                                    <option value="0">--区县--</option>
                                </select>
                                <input type="hidden" name="provinceName" id="provinceName" />
                                <input type="hidden" name="cityName" id="cityName" />
                                <input type="hidden" name="areaName" id="areaName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">详细地址</label>
                            <div class="col-sm-9">
                            <input type="text" class="form-control" name="address" data-rule-required="true" data-msg-required="请录入详细地址"
                                   data-rule-minlength="2" data-msg-minlength="详细地址最少2个字符"
                                   data-rule-maxlength="20" data-msg-maxlength="详细地址最大为50个字符"
                                   placeholder="详细地址"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">收款帐户名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="accountName" name="qhsAccountInfo.accountName"
                                       data-rule-required="true" data-msg-required="请录入收款帐户名"
                                       data-rule-minlength="2" data-msg-minlength="收款帐户名最少2个字符"
                                       data-rule-maxlength="20" data-msg-maxlength="收款帐户名最大为20个字符"
                                       placeholder="收款帐户名"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">收款账号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="accountNumber" name="qhsAccountInfo.accountNumber"
                                       data-rule-required="true" data-msg-required="请录入收款账号"
                                       data-rule-positiveIntegerNum="true"
                                       placeholder="请录入收款账号"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">开户行</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="bank" name="qhsAccountInfo.bank"
                                       data-rule-required="true" data-msg-required="请录入开户行"
                                       placeholder="开户行"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">开户支行</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="bankBranch" name="qhsAccountInfo.bankBranch"
                                       data-rule-required="true" data-msg-required="请录入开户支行"
                                       placeholder="开户行"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">佣金比例(%)</label>
                            <div class="col-sm-9">
                                <input class="form-control" name="rate"  data-rule-required="true" data-msg-required="请录入佣金比例"
                                       data-rule-positiveIntegerNum="true" data-msg-positiveIntegerNum="请录入整数"
                                       placeholder="佣金比例"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="btn-submit" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header" style="background-color: #307095;">
                    <button type="button" class="close" data-dismiss="modal" id="btn_close" >
                        <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel3">客户—完善信息</h4>
                </div>

                <div class="modal-body">
                    <form class="form-horizontal"  id="infoForm"  method="post">
                        <input type="hidden" class="form-control" name="kaId" value="" />
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">法人</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="legalPerson" placeholder="法人名称"
                                       data-rule-required="true" data-msg-required="请录入法人名称"
                                       data-rule-minlength="2" data-msg-minlength="法人名称最少2个字符"
                                       data-rule-maxlength="20" data-msg-maxlength="法人名称最大为20个字符"
                                />
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">联系方式</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="legalPhone" name="legalPhone"
                                       data-rule-required="true" data-msg-required="请录入联系方式"
                                       data-rule-iphone="true"
                                       placeholder="联系方式"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">经营范围</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="businessScope" placeholder="经营范围（手机，电脑.....）"
                                       data-rule-required="true" data-msg-required="请录入经营范围"
                                       data-rule-minlength="2" data-msg-minlength="经营范围最少2个字符"
                                       data-rule-maxlength="50" data-msg-maxlength="经营范围最大为50个字符"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">经营方式</label>
                            <div class="col-sm-9">
                                <select class="form-control select2" name="businessMain" id="businessMain" data-rule-required="true" data-msg-required="请选择经营方式">
                                    <option value="" ></option>
                                    <option value="运营商（移动）">运营商（移动）</option>
                                    <option value="运营商（联通）">运营商（联通）</option>
                                    <option value="运营商（电信）">运营商（电信）</option>
                                    <option value="批发">批发</option>
                                    <option value="卖场">卖场</option>
                                    <option value="连锁">连锁</option>
                                    <option value="专卖店">专卖店</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">主要品牌</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="mainBrands"  placeholder="主要品牌"
                                       data-rule-required="true" data-msg-required="请录入主要品牌"
                                       data-rule-minlength="2" data-msg-minlength="主要品牌最少2个字符"
                                       data-rule-maxlength="50" data-msg-maxlength="主要品牌最大为50个字符"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">零售店数量</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="storeNum" name="storeNum"
                                       data-rule-required="true" data-msg-required="请录入零售店数量"
                                       data-rule-positiveIntegerNum="true" data-msg-positiveIntegerNum="请录入整数"
                                       placeholder="零售店数量"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">零售销量</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="storeSales"
                                       data-rule-required="true" data-msg-required="请录入零售销量"
                                       data-rule-positiveIntegerNum="true" data-msg-positiveIntegerNum="请录入整数"
                                       placeholder="零售销量"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">覆盖地区</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="coverageArea" name="coverageArea"
                                       data-rule-required="true" data-msg-required="请录入覆盖地区"
                                       data-rule-minlength="2" data-msg-minlength="覆盖地区最少2个字符"
                                       data-rule-maxlength="50" data-msg-maxlength="覆盖地区最大为50个字符"
                                       placeholder="覆盖地区"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">市场占有率(%)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="occupancy" name="occupancy"
                                       data-rule-required="true" data-msg-required="市场占有率"
                                       data-rule-positiveIntegerNum="true" data-msg-positiveIntegerNum="请录入整数"
                                       placeholder="市场占有率"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">地理位置</label>
                            <div class="col-sm-9">
                                <!--<input type="text" class="form-control" id="storePosition" name="storePosition"
                                       data-rule-required="true" data-msg-required="请录入地理位置"
                                       data-rule-minlength="2" data-msg-minlength="地理位置最少2个字符"
                                       data-rule-maxlength="50" data-msg-maxlength="地理位置最大为50个字符"
                                       placeholder="地理位置"/>-->
                                <select class="form-control select2" name="storePosition" id="storePosition" data-rule-required="true" data-msg-required="请选择地理位置">
                                    <option value="" ></option>
                                    <option value="繁华商业圈/手机一条街">繁华商业圈/手机一条街</option>
                                    <option value="一般地段">一般地段</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">从业年限</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="businessYear" name="businessYear"
                                       data-rule-required="true" data-msg-required="请录入从业年限"
                                       data-rule-positiveIntegerNum="true" data-msg-positiveIntegerNum="请录入整数"
                                       placeholder="从业年限"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">电子邮箱</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="email" name="email"
                                      data-rule-email2="true" data-msg-email2="请录入正确的邮箱地址"
                                       placeholder="电子邮箱"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="btn-infosubmit" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- DataTables -->
    <script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript">

        $(function (){
            var tables = $("#dataTable").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                /*pagingType: "full_numbers",*/
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/ka/list",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'provinceName',defaultContent: ""},
                    {"data": 'cityName',defaultContent: ""}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                    {"data": 'cityContactName',defaultContent: ""},
                    {"data": 'kaName'}
                    <shiro:hasAnyRoles name="sys_agency,sys_nationwide">
                    ,{"data": 'storeCount', defaultContent: "",
                        "render" :function(data,type,full,callback) {
                            /*<![CDATA[*/
                            if(data!=0){
                                return "<a href='javascript:;' id='storelist' onclick='storelist(this)'>"+data+"</a>";
                            }else{
                                return data;
                            }
                            /*]]>*/
                        }
                    }
                    </shiro:hasAnyRoles>
                     ,{"data": 'contactName'},
                     {"data": 'contactPhone'},
                     {"data": 'status',
                        "render":function(data,type,full,callback) {
                            if(data=="2") return /*<![CDATA[*/"<span class='label label-danger'>禁用</span>"/*]]>*/;
                            if(data=="1") return /*<![CDATA[*/"<span class='label label-success'>启用</span>"/*]]>*/;
                        }
                    },
                    {"data": 'rate'},
                    {"data": 'createTimeDate', defaultContent: ""}
                    <shiro:hasAnyRoles name="sys_agency,sys_nationwide">
                    ,{"data": "status","width":"260px",
                        "render":function(data,type,full,callback) {
                            /*<![CDATA[*/
                            if(data=="2") return "<div class='btn-group'><button id='completeRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>完善信息</button>" +
                                "<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>编辑</button>" +
                                "<div class='btn-group'><button id='useRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-check'></i>启用</button>";
                            if(data=="1") return "<div class='btn-group'><button id='completeRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>完善信息</button>" +
                                "<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>编辑</button>" +
                                "<div class='btn-group'><button id='forbidRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-close'></i>禁用</button>"+
                                "<div class='btn-group'><button id='changePass' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>重置密码</button>";
                            /*]]>*/
                        }
                    }
                    </shiro:hasAnyRoles>

                ],
                /*<![CDATA[*/
                dom: '<"toolbar">frtip',
                /*]]>*/

                //每加载完一行的回调函数
                createdRow: function( row, data, index ) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                },
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },

                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }

            });

            <shiro:hasRole name="sys_agency">
            $("div.toolbar").html('<button type="button" class="btn btn-primary btn-sm" id="btn-add">新增</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');
            </shiro:hasRole>
           <shiro:hasAnyRoles name="sys_nationwide,sys_kaAgency">
                $("div.toolbar").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');
           </shiro:hasAnyRoles>
            //查询按钮
            $("#btn-query").on("click", function () {
                tables.fnDraw();
            });
            $("#dataTable tbody").on("click", "#storelist", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                window.location.href = "/ka/storeList?kaId="+data.kaId;
            });
            //导出按钮
            $("#btn-down").on("click", function () {
                /*<![CDATA[*/
                $("div.toolbar button").hide();
                $("div.toolbar").append("<div class='progress active' style='width: 500px;height: 25px;'><div class='progress-bar progress-bar-primary progress-bar-striped' id='progress-bar'" +
                    " role='progressbar' aria-valuenow='10' aria-valuemin='0' aria-valuemax='100' style='width: 10%'>导出中...</div></div>")
                /*]]>*/
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/ka/exportXls');
                form.submit();
                var timer =  setInterval(function () {
                    $.ajax({
                        url: '/ka/isExport',
                        type: 'POST',
                        dataType: "json",
                        cache: "false",
                        success: function (result) {
                            if (result.result == 200) {
                                /*<![CDATA[*/
                                var now = parseInt($("#progress-bar").attr("aria-valuenow")) +20;
                                if(now < 121){
                                    $("#progress-bar").attr("aria-valuenow",now);
                                    $("#progress-bar").attr("style","width:"+now+"%");
                                }
                                /*]]>*/
                            }else{
                                /*<![CDATA[*/
                                $("div.toolbar button").show();
                                $("div.toolbar div ").remove();
                                /*]]>*/
                                clearInterval(timer);
                            }
                        }
                    })
                },"2000");
            });
            //完善信息
            $("#dataTable tbody").on("click", "#completeRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                $("#editForm div").removeClass('has-success');
                $("#infoModal input[name=kaId]").val(data.kaId);
                $("#infoModal input[name=legalPerson]").val(data.legalPerson);
                $("#infoModal input[name=legalPhone]").val(data.legalPhone);
                $("#infoModal input[name=businessScope]").val(data.businessScope);
                $("#infoModal input[name=businessMain]").val(data.businessMain);
                $("#infoModal input[name=mainBrands]").val(data.mainBrands);
                $("#infoModal input[name=storeNum]").val(data.storeNum);
                $("#infoModal input[name=storeSales]").val(data.storeSales);
                $("#infoModal input[name=coverageArea]").val(data.coverageArea);
                $("#infoModal input[name=storePosition]").val(data.storePosition);
                $("#infoModal input[name=businessYear]").val(data.businessYear);
                $("#infoModal input[name=email]").val(data.email);

                $("#infoModal").modal("show");
            });
            //短信重发
            $("#dataTable tbody").on("click", "#changePass", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                $("#changePass").attr("disabled",true);
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "/ka/changePass",
                    data: {"kaId":data.kaId},
                    dataType: "json",
                    async: false,
                    error: function (request) {
                        $("#changePass").attr("disabled",false);
                        toastr.error("网络错误...");
                    },
                    success: function (data) {
                        if (data.result == "200") {
                            toastr.success(data.msg);
                            $("#changePass").attr("disabled",false);
                        } else {
                            $("#changePass").attr("disabled",false);
                            toastr.error(data.msg);
                        }
                    }
                });
            })
            var validat = $("#infoForm").validate();
            $("#btn-infosubmit").on("click", function(){
                if(validat.form()) {
                    $("#btn-infosubmit").attr("disabled",true);
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: url,
                        data: $("#infoForm").serialize(),
                        dataType: "json",
                        async: false,
                        error: function (request) {
                            toastr.error("网络错误...");
                        },
                        success: function (data) {
                            //   data = $.parseJSON(data);
                            if (data.result == "200") {
                                $("#btn-infosubmit").attr("disabled",false);
                                $("#infoModal").modal("hide");
                                tables.fnDraw();
                                toastr.success("完善信息操作成功！");
                                if ($("#loginName").attr("readonly")) {
                                    $("#loginName").removeAttr("readonly");
                                }
                            } else {
                                $("#btn-infosubmit").attr("disabled",false);
                                toastr.error("操作失败，请稍后再试！");
                            }
                        }
                    });
                }
            })
            //禁用
            $("#dataTable tbody").on("click", "#forbidRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                bootbox.confirm(
                    {
                        message: "确认要禁用该账户吗",
                        buttons: {
                            confirm: {
                                label: '确认'
                            },
                            cancel: {
                                label: '取消'
                            }
                        },
                        callback: function (result) {
                            // 返回 true  或者false
                            if (result) {
                                $.ajax({
                                    url: '/ka/forbid/' + data.kaId,
                                    type: 'POST',
                                    dataType: "json",
                                    cache: "false",
                                    success: function (result) {
                                        if (result.result == 200) {
                                            tables.fnDraw();
                                            toastr.success(result.msg);
                                        } else {
                                            toastr.error(result.msg);
                                        }
                                    },
                                    error: function (err) {
                                        toastr.error("网络错误...");
                                    }
                                });
                            }
                        }
                    });
            });
            //启用
            $("#dataTable tbody").on("click", "#useRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                bootbox.confirm(
                    {
                        message: "确认要启用该账户吗",
                        buttons: {
                            confirm: {
                                label: '确认'
                            },
                            cancel: {
                                label: '取消'
                            }
                        },
                        callback: function (result) {
                            // 返回 true  或者false
                            if (result) {
                                $.ajax({
                                    url: '/ka/use/' + data.kaId,
                                    type: 'POST',
                                    dataType: "json",
                                    cache: "false",
                                    success: function (result) {
                                        if (result.result == 200) {
                                            tables.fnDraw();
                                            toastr.success(result.msg);
                                        } else {
                                            toastr.error(result.msg);
                                        }
                                    },
                                    error: function (err) {
                                        toastr.error("网络错误...");
                                    }
                                });
                            }
                        }
                    });
            });
            var url="/ka/edit";
            // 获取代理客户列表
            var kaAgencyData;
            $.ajax({
                url: '/kaAgency/getlist',
                type: 'POST',
                data:$("#getlistForm").serialize(),
                dataType: "json",
                cache: "false",
                success: function (result) {
                    if (result.result == 200) {
                        kaAgencyData =result.data;
                    }else{
                        toastr.error(result.msg);
                        return;
                    }
                },
                error:function(err){
                toastr.error("网络错误...");
                }
            });

            //添加
            $("#btn-add").on("click", function () {
                    $("#editForm div").removeClass('has-success');
                    $("#editModal input[name=kaId]").val(null);
                    $("#editModal input[name=kaName]").val("");
                    $("#loginName").attr("readonly",false);
                    $("#editModal input[name=loginName]").val("");
                    $("#editModal input[name=contactName]").val("");
                    $("#editModal input[name=contactPhone]").val("");
                    $("#editModal input[id=accountName]").val("");
                    $("#editModal input[id=accountId]").val("");
                    $("#editModal input[id=bank]").val("");
                    $("#editModal input[id=bankBranch]").val("");
                    $("#editModal input[id=accountNumber]").val("");
                    $("#editModal input[name=rate]").val("");
                    $("#editModal input[name=address]").val("");
                    $("#editModal select[name=kaType]").val("");
                    $.ajax({
                        url: '/ka/getCityAgencyList',
                        type: 'POST',
                        data:$("#getlistForm").serialize(),
                        dataType: "json",
                        cache: "false",
                        success: function (result) {
                            if (result.result == 200) {
                                /*<![CDATA[*/
                                $("#cityAgencyId").append("<option value='' ></option>");
                                /*]]>*/
                                $.each(result.data, function (i, n) {
                                    /*<![CDATA[*/
                                    $("#cityAgencyId").append("<option value='" + n.cityAgencyId + "' contactName='"+n.contactName+"'>" + n.contactName + "</option>")
                                    /*]]>*/
                                });
                            }else{
                                toastr.error(result.msg);
                                return;
                            }
                        },
                        error:function(err){
                            toastr.error("网络错误...");
                        }
                    });

                $.each(kaAgencyData, function (i, n) {
                    /*<![CDATA[*/
                    $("#kaAgencyId").append("<option value='" + n.kaAgencyId + "' >" + n.kaAgencyName + "</option>")
                    /*]]>*/
                });

                    $("#myModalLabel2").text("客户-新增");
                    $("#editModal").modal("show");

            });
            $('#editModal').on('hide.bs.modal', function () {
                $("#cityAgencyId > option").remove();
            });
            var i = 0;

            //修改
            $("#dataTable tbody").on("click", "#editRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                var accountName = data.qhsAccountInfo.accountName;
                var accountId = data.qhsAccountInfo.accountId;
                var bank = data.qhsAccountInfo.bank;
                var bankBranch = data.qhsAccountInfo.bankBranch;
                var accountNumber = data.qhsAccountInfo.accountNumber;

                $("#editForm div").removeClass('has-success');
                $("#editModal input[name=kaId]").val(data.kaId);
                $("#editModal input[name=kaName]").val(data.kaName);
                $("#editModal input[id=accountId]").val(accountId);
                $("#loginName").attr("readonly","readonly");
                $("#editModal input[name=loginName]").val(data.loginName);
                $("#editModal input[name=contactName]").val(data.contactName);
                $("#editModal input[name=contactPhone]").val(data.contactPhone);
                $("#editModal input[id=accountName]").val(accountName);
                $("#editModal input[id=bank]").val(bank);
                $("#editModal input[id=bankBranch]").val(bankBranch);
                $("#editModal input[id=accountNumber]").val(accountNumber);
                $("#editModal input[name=rate]").val(data.rate);
                $("#editModal input[name=address]").val(data.address);
                $("#editModal select[name=kaType]").val(data.kaType);


                /*<![CDATA[*/
                $.each(province, function (k, p) {
                    if (data.provinceId == p.ProID) {
                        var option = "<option value='" + p.ProID + "' selected='selected'>" + p.ProName + "</option>";
                        $("#selProvince ").append(option);
                    }else{
                        var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
                        $("#selProvince ").append(option);
                    }
                });
                $.each(city, function (k, p) {
                    if (p.ProID == data.provinceId) {
                        if (data.cityId == p.CityID) {
                            var option = "<option value='" + p.CityID + "' selected='selected'>" + p.CityName + "</option>";
                            $("#selCity").append(option);
                        }else{
                            var option = "<option value='" + p.CityID + "' >" + p.CityName + "</option>";
                            $("#selCity").append(option);
                        }
                    }
                });

                $.each(District, function (k, p) {
                    if (p.CityID == data.cityId) {
                        if (data.areaId == p.Id) {
                            var option = "<option value='" + p.Id + "' selected='selected'>" + p.DisName + "</option>";
                            $("#selDistrict").append(option);
                        }else{
                            var option = "<option value='" + p.Id + "' >" + p.DisName + "</option>";
                            $("#selDistrict").append(option);
                        }
                    }
                });
                $.each(kaAgencyData, function (i, n) {
                if (n.kaAgencyId == data.kaAgencyId ) {
                    $("#kaAgencyId").append("<option value='" + n.kaAgencyId + "'  selected='selected'>" + n.kaAgencyName + "</option>")
                }else{
                    $("#kaAgencyId").append("<option value='" + n.kaAgencyId + "' >" + n.kaAgencyName + "</option>")
                   }
                });

                /*]]>*/

                $.ajax({
                    url: '/ka/getCityAgencyList',
                    type: 'POST',
                    data:$("#getlistForm").serialize(),
                    dataType: "json",
                    cache: "false",
                    success: function (result) {
                        if (result.result == 200) {
                            /*<![CDATA[*/
                            $("#cityAgencyId").append("<option value='' ></option>");
                            /*]]>*/
                            $.each(result.data, function (i, n) {
                                /*<![CDATA[*/
                                if(data.cityAgencyId == n.cityAgencyId){
                                    $("#cityAgencyId").append("<option value='" + n.cityAgencyId + "' selected='selected' contactName='"+n.contactName+"'>" + n.contactName + "</option>")
                                }else{
                                    $("#cityAgencyId").append("<option value='" + n.cityAgencyId + "' contactName='"+n.contactName+"'>" + n.contactName + "</option>")
                                }
                                /*]]>*/
                            });
                        }else{
                            toastr.error(result.msg);
                            return;
                        }
                    },
                    error:function(err){
                        toastr.error("网络错误...");
                    }
                });
                $("#editModal").modal("show");
            });
            $('#editForm').on('hide.bs.modal', function () {
                $("#cityAgencyId > option").remove();
            });
            var validator = $("#editForm").validate();
            //添加、修改  表单异步提交
            $("#btn-submit").on("click", function(){
                $("#provinceName").val($("#selProvince").find("option:selected").text());
                $("#cityName").val($("#selCity").find("option:selected").text());
                if($("#selDistrict").find("option:selected").val()==0){
                    $("#selDistrict").find("option:selected").val(null);
                    $("#areaName").val(null);
                }
                $("#areaName").val($("#selDistrict").find("option:selected").text());
                $("#cityContactName").val($("#cityAgencyId").find("option:selected").attr("contactname"));
                if(validator.form()) {
                    $("#btn-submit").attr("disabled",true);
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: url,
                        data: $("#editForm").serialize(),
                        dataType: "json",
                        async: false,
                        error: function (request) {
                            toastr.error("网络错误...");
                        },
                        success: function (data) {
                            //   data = $.parseJSON(data);
                            if (data.result == "200") {
                                $("#btn-submit").attr("disabled",false);
                                $("#editModal").modal("hide");
                                tables.fnDraw();
                                toastr.success(data.msg);
                                if ($("#loginName").attr("readonly")) {
                                    $("#loginName").removeAttr("readonly");
                                }
                            } else {
                                $("#btn-submit").attr("disabled",false);
                                toastr.error(data.msg);
                            }
                        }
                    });
                }
            });
            //删除
            $("#dataTable tbody").on("click", "#delRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                bootbox.confirm(
                    {
                        message: "确认要删除吗",
                        buttons: {
                            confirm: {
                                label: '确认'
                            },
                            cancel: {
                                label: '取消'
                            }
                        },
                        callback: function (result) {
                            // 返回 true  或者false
                            if (result) {
                                $.ajax({
                                    url: '/ka/delete',
                                    type: 'POST',
                                    data: {"kaId": data.kaId},
                                    dataType: "json",
                                    cache: "false",
                                    success: function (result) {
                                        if (result.result == 200) {
                                            toastr.success(result.msg);
                                            tables.api().row().remove().draw(false);
                                        } else {
                                            toastr.error(result.msg);
                                        }
                                    },
                                    error: function (err) {
                                        toastr.error("网络错误...");
                                    }
                                });
                            }
                        }
                    });


            });

            /*<![CDATA[*/
            $(function () {
                $.each(province, function (k, p) {
                    var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
                    $("#selProvince").append(option);
                    $("#selProvince2").append(option);
                });

                $("#selProvince").change(function () {
                    var selValue = $(this).val();
                    $("#selCity option:gt(0)").remove();
                    $.each(city, function (k, p) {
                        if (p.ProID == selValue) {
                            var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";
                            $("#selCity").append(option);
                        }
                    });

                });
                $("#selProvince2").change(function () {
                    var selValue = $(this).val();
                    $("#selCity option:gt(0)").remove();
                    $.each(city, function (k, p) {
                        if (p.ProID == selValue) {
                            var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";
                            $("#selCity2").append(option);
                        }
                    });

                });
                $("#selCity").change(function () {
                    var selValue = $(this).val();
                    $("#selDistrict option:gt(0)").remove();

                    $.each(District, function (k, p) {
                        if (p.CityID == selValue) {
                            var option = "<option value='" + p.Id + "'>" + p.DisName + "</option>";
                            $("#selDistrict").append(option);
                        }
                    });
                });
            });
            /*]]>*/


        });
        //时间插件
        $('.form_date').datetimepicker({
            language:  'zh-CN',
            weekStart: 1,
            todayBtn: true,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: 'yyyy-mm-dd',
            startDate:'2017-01-01',
            endDate:new Date(),
            pickerPosition:'bottom-left'
        });

    </script>


</div>
</body>
</html>